﻿@{
    ViewBag.Title = "角色选择";
    Layout = null;
}
<style>
    input[type="checkbox"] {
        border: 1px solid #C6C6C6;
        outline: none;
    }

    .button {
        border-radius: 0px;
    }

    .mainbody {
        padding: 0px;
    }
    /*自定义复选框*/
    .ScrollBar {
        background: none repeat scroll 0 0 #fff;
        overflow: auto;
    }

    .sys_spec_text {
        padding-left: 15px;
    }

        .sys_spec_text li {
            display: inline;
            float: left;
            height: 43px;
            margin: 10px 15px 0px 0;
            outline: none;
            outline: none;
            position: relative;
            position: relative;
        }

            .sys_spec_text li a {
                background: #fff;
                border: 1px solid #ccc;
                border-radius: 5px 5px 5px 5px;
                cursor: pointer;
                display: inline-block;
                line-height: 39px;
                outline: none;
                overflow: hidden;
                padding: 0px 0px;
                text-align: center;
                text-align: center;
                text-overflow: ellipsis;
                vertical-align: middle;
                white-space: nowrap;
                width: 98px;
                word-break: keep-all;
            }

                .sys_spec_text li a:hover {
                    border: 1px solid #4A5B79;
                    padding: 0 0px;
                    text-decoration: none;
                }

            .sys_spec_text li .check {
                background: url(/Contents/images/edit/sys_item_selected.gif) no-repeat right bottom;
                bottom: 2px;
                display: none;
                font-size: 0;
                height: 10px;
                line-height: 0;
                position: absolute;
                right: 1px;
                width: 10px;
                z-index: 99;
            }

            .sys_spec_text li.selected a {
                border: 1px solid #4A5B79;
                padding: 0 0px;
            }

            .sys_spec_text li.selected .check {
                display: block;
            }

            .sys_spec_text li img {
                border: 0px solid #fff;
                margin-top: -2px;
                padding-right: 5px;
                vertical-align: middle;
            }

        .sys_spec_text a.disabled {
            color: #a9a6a6;
            cursor: not-allowed;
            display: block;
            overflow: hidden;
        }
</style>
@model IList<EIP.System.Models.Dtos.Identity.SystemUserRoleOutput>
                <div class="alert alert-warning  alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    选中复选框即可授予相应权限，取消选中则回收相应权限。
                </div>

                <section class="content" id="mainDiv">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box box-primary box-solid">
                                <div class="box-header with-border">
                                    <h3 class="box-title">组织机构</h3>
                                </div>
                                <div class="box-body">
                                    @*工具条*@
                                    <ul id="chosenRoleTree" class="ztree" style="height: 370px; overflow: auto"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="box box-primary box-solid">
                                <div class="box-header with-border">
                                    <h3 class="box-title">角色</h3>
                                </div>
                                <div class="box-body no-padding">
                                    @*所有功能性按钮*@
                                    <div style="height: 383px;" class="ScrollBar">
                                        <ul id="AccessButton" class="sys_spec_text">
                                            @{
                                                foreach (var m in Model)
                                                {
                                                    string className = m.Exist ? "selected" : "";
                                                    <li title="@m.Code-@m.Name" searchcode="@m.Code.ToLower()" searchname="@m.Name.ToLower()" name="@m.OrganizationId" class="@className">
                                                        <a id="@m.RoleId">
                                                            @m.Name
                                                        </a><i class="check"></i>
                                                    </li>
                                                }
                                            }
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </section>
<div class="box-footer text-right">
    <!--以下两种方式提交验证,根据所需选择-->
    <button onclick=" formSubmit(); return false; " type="button" class="btn btn-success" data-btn-type="save" title="确定"><span class="bootstrap-dialog-button-icon fa fa-check"></span>确定</button>
    <button type="button" class="btn btn-danger" data-btn-type="cancel" data-dismiss="modal"><span class="bootstrap-dialog-button-icon fa fa-times"></span>取消</button>
</div>
    @Html.Hidden("userId")
<script>
    $(function () {
        loadChosenTree();
        initChosenRoleEvent();
    });

  var chosenRoleZNodes,
      chosenRoleTreeObj,
      chosenRoleSetting;
    
    //表单提交
    function formSubmit() {
        var users = $("li[class='selected']", $(".ScrollBar")).find("a");
        var json = "";
        $.each(users, function (i, item) {
            json += "{\"r\":\"" + item.id + "\"},";
        });
        json = json.substring(0, json.length - 1);
        json = "[" + json + "]";
        UtilAjaxPostWait("/System/Role/SaveUserRole",
            {
                userRole: json,
                userId: $("#userId").val()
            },
        success);
    }

    //提交成功
    function success(data) {
        if (DialogAjaxResult(data)) { }
    }

    //初始化组织机构
    function initChosenTree() {
        //配置
        chosenRoleSetting = {
            view: {
                dblClickExpand: false,
                showLine: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            expandSpeed: "",
            callback: {
                onClick: onChosenRoleClickTree
            }
        };
    }

    //初始化树结构:同步
    function initChosenRoleTreeData() {
        UtilAjaxPostAsync("/System/Organization/GetOrganizationTree", null, function (data) {
            chosenRoleZNodes = data;
            chosenRoleTreeObj = $.fn.zTree.init($("#chosenRoleTree"), chosenRoleSetting, chosenRoleZNodes);
        });
    }

    //树点击触发
    function onChosenRoleClickTree(e, treeId, treeNode) {
        searchUserByOrgId(treeNode.id);
        //展开或者关闭该节点
        chosenRoleTreeObj.expandNode(treeNode);
    }

    //根据组织机构id查询对应的人员信息
    function searchUserByOrgId(orgId) {
        $(".ScrollBar li").hide();
        $("[name='" + orgId + "']").show();
    }

   
    //加载页面数据
    function loadChosenTree() {
        initChosenTree();
        initChosenRoleTreeData();
        $(".ScrollBar li").show();
    }

    //初始化事件
    function initChosenRoleEvent() {
        console.log(123);
        $("#AccessButton li").click(function () {
            if (!$(this).hasClass("selected")) {
                $(this).attr("class", "selected");
            } else {
                $(this).attr("class", "");
            }
        });
    }

    //查询
    function search() {
        var key = $("#txtKeywords").val().toLocaleLowerCase();
        if (key != "") {
            $(".ScrollBar li").hide();
        } else {
            $(".ScrollBar li").show();
        }
        $("[searchcode*='" + key + "']", $(".ScrollBar")).show();
        $("[searchname*='" + key + "']", $(".ScrollBar")).show();
    }
</script>